<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理</title>
    <meta name="description" content="后台管理">
    <meta name="keywords" content="后台管理">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    <div class="content-header">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="用户名" v-model="pagination.username" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-button @click="getDataList()">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新增</el-button>
            </div>
            <el-table size="small" :data="dataList" stripe>
                <el-table-column prop="id" align="center" label="ID"></el-table-column>
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="username" label="用户名" align="center"></el-table-column>
                <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                <el-table-column label="性别" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.gender == '0' ? '女' : '男' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" align="center"></el-table-column>
                <el-table-column prop="role.name" label="角色" align="center"></el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagination"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageNum"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
            <el-dialog title="新增用户" :visible.sync="createDialogVisible">
                <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right"
                         label-width="100px">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="formData.name"/>
                    </el-form-item>
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="formData.username"/>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="formData.gender">
                            <el-option label="女" value="0"></el-option>
                            <el-option label="男" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="formData.age"/>
                    </el-form-item>
                    </el-col>
                    <el-form-item label="角色" prop="roleId">
                        <el-select v-model="formData.roleId">
                            <el-option
                                    v-for="role in roleList"
                                    :key="role.id"
                                    :label="role.name"
                                    :value="role.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="formData.phone"/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="createDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAdd()">确定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="编辑用户" :visible.sync="editDialogVisible">
                <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                         label-width="100px">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="formData.name"/>
                    </el-form-item>
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="formData.username"/>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="formData.gender">
                            <el-option label="女" :value="0"></el-option>
                            <el-option label="男" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="formData.age"/>
                    </el-form-item>
                    <el-form-item label="角色" prop="roleId">
                        <el-select v-model="formData.roleId">
                            <el-option
                                    v-for="role in roleList"
                                    :key="role.id"
                                    :label="role.name"
                                    :value="role.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="formData.phone"/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="createDialogVisible4Edit = false">取消</el-button>
                    <el-button type="primary" @click="handleEdit()">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>
</body>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../plugins/jquery/jquery.min.js"></script>
<script src="../plugins/axios/axios-0.18.0.js"></script>
<script>
  const vue = new Vue({
    el: '#app',
    data: {
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        username: null
      },
      dataList: [],
      roleList: [],
      formData: {},
      createDialogVisible: false,
      editDialogVisible: false,
      rules: {
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        roleId: [{required: true, message: '请选择角色', trigger: 'change'}]
      }
    },
    created() {
      this.getDataList();
      this.getRoleList();
    },
    methods: {
      handleEdit() {
        this.$refs['dataEditForm'].validate((valid) => {
          if (!valid) {
            return false;
          }
          axios.put('/api/users', this.formData).then((res) => {
            this.editDialogVisible = false;
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
            } else {
              this.$message.error(res.data.message);
            }
            this.getDataList();
          });
        });
      },
      handleAdd() {
        this.$refs['dataAddForm'].validate((valid) => {
          if (!valid) {
            return false;
          }
          axios.post('/api/users', this.formData).then((res) => {
            this.createDialogVisible = false;
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
            } else {
              this.$message.error(res.data.message);
            }
            this.getDataList();
          });
        });
      },
      getDataList() {
        const params = {
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          username: this.pagination.username
        };
        axios.get("/api/users", {
          params: params
        }).then((res) => {
          if (res.data.code === 200) {
            this.pagination.total = res.data.data.total;
            this.dataList = res.data.data.records;
          }
        });
      },
      getRoleList() {
        axios.get("/api/roles").then((res) => {
          if (res.data.code === 200) {
            this.roleList = res.data.data.records;
          }
        });
      },
      resetForm() {
        this.formData = {}
      },
      handleCreate() {
        this.resetForm();
        this.createDialogVisible = true;
      },
      handleUpdate(row) {
        this.resetForm();
        this.editDialogVisible = true;
        axios.get("/api/users/" + row.id).then((res) => {
          this.formData = res.data.data;
        });
      },
      handleCurrentChange(pageNum) {
        this.pagination.pageNum = pageNum;
        this.getDataList();
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete('/api/users/' + row.id).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
            } else {
              this.$message.error(res.data.message);
            }
            this.getDataList();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  });
</script>
</html>